<template>
  <view
    class="bg-gray-100 font-sans leading-normal tracking-normal bg-yellow-800"
  >
    <!-- 顶部背景图 -->
    <view class="w-full h-auto absolute left-0 top-0">
      <image src="@/assets/imgs/sy1.png" class="w-full" mode="widthFix"></image>
      <image src="@/assets/imgs/sy2.png" class="w-full" mode="widthFix"></image>
    </view>
    <view class="mt-16 container w-full text-center relative z-2 mb-[480rpx]">
      <h1 class="text-2xl font-bold text-yellow-800" @click="toTest">功德水 · 随喜供养</h1>
    </view>

    <!-- 功能菜单 - 使用v-for渲染 -->
    <view
      class="container relative z-2 mb-6 mx-auto w-[700rpx] box-border p-4 bg-[#ffffffbb] rounded-lg relative z-2"
    >
      <view class="grid grid-cols-4 gap-4">
        <view
          v-for="(menu, index) in menuItems"
          :key="index"
          @tap="jump(menu)"
          class="flex flex-col gap-2 items-center justify-center"
        >
          <view
            class="flex items-center justify-center w-[132rpx] h-[132rpx] bg-[#fff] overflow-hidden rounded-full"
          >
            <image
              :src="menu.icon"
              class="w-[120rpx] h-[120rpx]"
              mode="aspectFit"
            />
          </view>

          <text class="text-[24rpx] font-bold text-[#333]">{{
            menu.name
          }}</text>
        </view>
      </view>
    </view>

    <!-- 功德榜 - 已经使用v-for -->
    <view
      class="container text-[#ffd67c] relative z-2 mb-8 mx-auto w-[700rpx] box-border rounded-lg p-4 bg-yellow-800 text-[#efd78d]"
    >
      <view class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">功德榜</h2>
        <text class="text-[28rpx] cursor-pointer" @tap="onBang">查看更多 ></text>
      </view>
      <view class="p-4 flex flex-col gap-4 rounded-lg bg-[#ffffff33]">
        <view
          v-for="(item, index) in topContributors"
          :key="index"
          class="flex items-center justify-between"
        >
          <view class="flex items-center">
            <image :src="item.icon" class="w-10 h-10 mr-2 rounded-full" />
            <text class="text-[32rpx] font-bold">{{ item.rank }}</text>
          </view>
          <text class="text-[32rpx] font-bold">{{ item.name }}</text>
          <text class="text-[32rpx] font-bold">{{ item.amount }} 袋</text>
        </view>
      </view>

      <!-- 功德水介绍 -->
      <view class="container mt-8 box-border p-4 bg-yellow-800">
        <h2 class="text-2xl font-bold text-center mb-4">NNB 功德水</h2>
        <p class="text-[28rpx] mb-4">
          功德水，是用于供奉佛前、祈福回向的清净之水。我们采用环保便捷的袋装形式，更易于运输、储存与寺院实际供养使用。
        </p>
        <p class="text-[28rpx] mb-4">每一袋功德水，皆代表一份真诚的善念。</p>
        <p class="text-[28rpx] mb-4">
          通过本平台，您可将功德水供养至全国各大寺院。
        </p>
      </view>

      <image
        class="w-[500rpx] mx-auto my-4 flex"
        src="@/assets/imgs/ren.png"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";
import { initShare } from "@/utils/config";
import yjgy from "@/assets/imgs/yjgy.png";
import gcjs from "@/assets/imgs/gcjs.png";
import gds from "@/assets/imgs/gds.png";
import wdgd from "@/assets/imgs/wdgd.png";
import gdb from "@/assets/imgs/gdb.png";
import gyzs from "@/assets/imgs/gyzs.png";
import wmdjh from "@/assets/imgs/wmdjh.png";
import mrxd from "@/assets/imgs/mrxd.png";

import jin from "@/assets/imgs/jin.png";
import yin from "@/assets/imgs/yin.png";
import tong from "@/assets/imgs/tong.png";

// initShare();


// 分享给好友
useShareAppMessage(() => initShare());

// 分享到朋友圈
useShareTimeline(() => initShare());

// 页面加载时显示分享菜单
onMounted(() => {
  Taro.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
});

const toTest = () => {
  Taro.navigateTo({
    url: '/other/test/index'
  })
}

// 功能菜单数据
const menuItems = ref([
  { name: "一键供养", icon: yjgy },
  { name: "古刹介绍", icon: gcjs },
  { name: "NNB 功德水", icon: gds },
  { name: "我的功德", icon: wdgd },
  { name: "功德榜", icon: gdb },
  { name: "供养证书", icon: gyzs },
  { name: "我们的计划", icon: wmdjh },
  { name: "每日心得", icon: mrxd },
]);

// 功德榜数据
const topContributors = ref([
  {
    rank: "NO1",
    name: "张李",
    amount: "100",
    icon: jin,
  },
  {
    rank: "NO2",
    name: "张李",
    amount: "100",
    icon: yin,
  },
  {
    rank: "NO3",
    name: "张李",
    amount: "100",
    icon: tong,
  },
]);


const onBang = () => {
  Taro.navigateTo({
    url: '/other/home/placard'
  })
}

const jump = (item) => {
  if(item.name == "一键供养"){
    Taro.switchTab({
      url: '/pages/about-us/index'
    })
    return;
  }
  if(item.name == "功德榜"){
    Taro.navigateTo({
      url: '/other/home/placard'
    })
    return;
  }
  if(item.name == "古刹介绍"){
    Taro.switchTab({
      url: '/pages/order/index'
    })
    return;
  }
  if (item.name == "NNB 功德水") {
    Taro.navigateTo({
      url: "/other/home/water",
    });
    return;
  }
  if(item.name == "我的功德"){
    Taro.switchTab({
      url: '/pages/mine/index'
    })
    return;
  }
  if(item.name == "供养证书"){
    Taro.navigateTo({
      url: '/other/home/certificate'
    })
    return;
  }
  if(item.name == "我们的计划"){
    Taro.navigateTo({
      url: '/other/home/plan'
    })
    return;
  }
  if(item.name == "每日心得"){
    Taro.navigateTo({
      url: '/other/home/day'
    })
    return;
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>
